<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, ref } from "vue";
import TestView from '@/components/echarts/TestChart.vue'
import TestButton from '@/components/buttons/TestButton.vue'

// 1920*1080
const _key = "76c16889f1d23d32bc11c6db58e3bf52"; // 替换为你的 Key
const map = ref<any>(null);
const AMapRef = ref<any>(null);

onMounted(() => {
  initMap();
});

function initMap() {
  AMapLoader.load({
    key: _key,
    version: "2.0",
    plugins: ["AMap.TileLayer.Satellite", "AMap.TileLayer.RoadNet"], // 加载卫星图和路网插件
  })
    .then((AMap) => {
      AMapRef.value = AMap;
      const satelliteLayer = new AMap.TileLayer.Satellite();
      const roadNetLayer = new AMap.TileLayer.RoadNet();

      // 初始化地图（卫星图 + 路网）
      map.value = new AMap.Map("container", {
        viewMode: "3D", // 必须 3D 模式
        zoom: 7,
        center: [102.2045261, 31.9078516],
        layers: [satelliteLayer, roadNetLayer], // 同时加载两个图层
      });
    })
    .catch((err) => {
      console.error("地图加载失败:", err);
    });
}
</script>

<template>
  <div class="all">
    <!-- 可视化组件 -->
    <div class="visual">
      <header>
        <img src="../../public/1678758747712-_gUPJr0X.png" />
        <h1>隧道施工地质灾害诊断系统</h1>
      </header>
      <!-- 主体区域 -->
      <main>
        <!-- 左侧区域 -->
        <div class="item-1">
          <div class="item-1-1">
            <img class="img-1" src="../../public/1678868154463-x5JCq6Vj.png" />
            <img class="img-2" src="../../public/1678762309227-E6RP8z2R.png" />
            <h3 class="h3">数据概览</h3>
            <TestView class="testView" />
          </div>
          <div class="item-1-2">
            <img class="img-1" src="../../public/1678868154463-x5JCq6Vj.png" />
            <img class="img-2" src="../../public/1678762309227-E6RP8z2R.png" />
            <h3 class="h3">温度监测数据</h3>
            <TestView class="testView" />
          </div>
          <div class="item-1-3">
            <img class="img-1" src="../../public/1678868154463-x5JCq6Vj.png" />
            <img class="img-2" src="../../public/1678762309227-E6RP8z2R.png" />
            <h3 class="h3">位移监测数据</h3>
            <TestView class="testView" />
          </div>
        </div>
        <!-- 中间区域 -->
        <div class="item-2">
          <div class="link">
            <TestButton />
            <TestButton />
            <TestButton />
            <TestButton />
            <TestButton />
            <TestButton />
          </div>
        </div>
        <!-- 右侧区域 -->
        <div class="item-3">
          <div class="item-3-1">
            <img class="img-1" src="../../public/1678868154463-x5JCq6Vj.png" />
            <img class="img-2" src="../../public/1678762309227-E6RP8z2R.png" />
            <h3 class="h3">通知公告</h3>
            <TestView class="testView" />
          </div>
          <div class="item-3-2">
            <img class="img-1" src="../../public/1678868154463-x5JCq6Vj.png" />
            <img class="img-2" src="../../public/1678762309227-E6RP8z2R.png" />
            <h3 class="h3">应力监测数据</h3>
            <TestView class="testView" />
          </div>
          <div class="item-3-3">
            <img class="img-1" src="../../public/1678868154463-x5JCq6Vj.png" />
            <img class="img-2" src="../../public/1678762309227-E6RP8z2R.png" />
            <h3 class="h3">视频监测数据</h3>
            <TestView class="testView" />
          </div>
        </div>
      </main>
    </div>

    <!-- 地图容器 -->
    <div id="container"></div>
  </div>
</template>

<style scoped>
@import url("../assets/testViewStyle/index.css");

/* 全局样式 */
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  width: 100%;
  height: 100%;
  position: absolute;
  /* 地图容器绝对定位 */
  top: 0;
  left: 0;
  z-index: 1;
  /* 地图层级设为1 */
}

/* 按钮容器样式 */
.map-controls {
  position: absolute;
  z-index: 2;
  background-color: transparent;
  /* 区域2透明 */
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 400px auto 400px;
  grid-template-rows: repeat(1, 100%);
  pointer-events: none;
}
</style>
